<template>
  <el-drawer @close="closeForm('')" size="500px" title="部门信息" :visible.sync="visible" :wrapperClosable="false">
    <el-form :model="form" :rules="rules" label-width="100px" class="drawerForm" ref="drawerForm">
      <el-form-item label="部门名称:" prop="name">
        <el-input
            v-model="form.name "
            placeholder="请输入"
        ></el-input>
      </el-form-item>
      <el-form-item label="上级部门:" prop="pid">
        <el-cascader
            v-model="form.pid"
            :options="treeData"
            :props="{ checkStrictly: true,label:'name',value:'id' }"
            clearable
            style="width: 100%"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="角色:" prop="roleList">
        <el-select
            clearable
            multiple
            v-model="form.roleList"
            class="select1"
            placeholder="请选择"
            style="width: 100%"
        >
          <selectOptions
              :options="
                    () =>
                      $api
                        .api_urcap_auth_role_listAll({
                          param:{roleType:'角色'}
                        })
                        .then(res => {
                          return res.data
                        })
                  "
              :labelField="'roleName'"
              :valueField="'id'"
          >
          </selectOptions>
        </el-select>
      </el-form-item>
    </el-form>
    <div class="drawer-footer">
      <el-button @click="handleSubmit" :loading="btnLoading" size="small" class="btn plain-btn">保存</el-button>
      <el-button @click="closeForm('')" size="small" class="btn default-btn">取消</el-button>
    </div>
  </el-drawer>
</template>

<script>
import {sandbox} from '@/libs/util'
import drawer from '@/mixins/drawer.js'
export default {
  name:'departmentDrawer',
  mixins: [drawer],
  props:{
    visible: {
      type: Boolean,
      default: false,
    },
    treeData: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      btnLoading:false,
      form: sandbox({
        name: '',
        pid: null,
        roleList: null,
      }),
      rules: {
        name: [{required: true, message: '必填项', trigger: 'blur'}],
        pid: [{required: true, message: '必填项', trigger: 'trigger'}],
      }
    }
  },
  methods: {
    SetData(row){
      this.$api.api_urcap_departmentManage_getDept({
        param: {
          deptId: row.id,
        }
      }).then(res => {
        Object.assign(this.form, res.data)
        this.form.roleList = this.form.roleList.map(ele => ele.id)
      })
    },
    AddRow(){
      let form = sandbox(this.form)
      Array.isArray(form.pid) && (form.pid = form.pid[form.pid.length - 1])
      if(form?.roleList?.length){
        form.roleList = form?.roleList.map(ele => {
          return {
            id:ele
          }
        })
      }
      return this.$api.api_urcap_departmentManage_addDept({
        body: form,
        config: {showMsg: true}
      })
    },
    UpdateRow(){
      return this.AddRow()
    },
  }
}
</script>

<style scoped lang="scss">

</style>
